<template>
    <div id="app" class="page-sweet">
				<header>
					<img v-bind:src="headerImg" />
					<div class="h-box">
						<div class="h-item">{{(money30/10000).toFixed(2)}}万元</div>
						<div class="h-item">{{(money90/10000).toFixed(2)}}万元</div>
					</div>
					<div @click="showrule" class="h-btn">活动规则</div>
				</header>
				<section>
						<div class="s-item" v-for="(item,index) in imgs" v-bind:key="index" >
							<img v-bind:src="item" />
						</div>
				</section>
				<footer v-if="isWeixin">
					<div @click="GoProductList" class="f-btn">立即投资</div>
				</footer>

				<mt-popup class="r-box" :closeOnClickModal="false" v-model="PopupRule">
					<div class="r-inner">
						<h4 class="r-title">活动规则</h4>
						<div class="r-body">
							<p>1. 用户在活动期间内的累计投资金额达到奖品指定要求，则可获得该奖品，且奖品均无获得次数限制；</p>
							<p>2. 暖心客服将在活动结束后的7个工作日内电联获奖用户，届时请保持电话通畅，如联系不上，则默认折算成8元现金红包（*可获份数）发放；</p>
							<p>3. 现金红包（自获得之日起7天内有效）将在活动结束后的10个工作日内发放至优选账户中，请及时查看并兑现；</p>
							<p>4. 实物奖品将在活动结束后的10个工作日内寄出并告知物流单号，届时请注意查收；</p>
							<p>5. 如需协助，请联系暖心客服：400-156-7657，服务时间：09:30~22:00</p>
						</div>
						<div class="r-footer">
							<p>*在法律允许范围内，优选金融保留对本次活动的最终解释权。</p>
							<p>优选金融所有奖品及活动均与苹果公司无关。</p>
							<p>活动仅成年人可参与，投资有风险，理财需谨慎。</p>
						</div>
					</div>
					<div @click="closerule" class="r-close"></div>
				</mt-popup>
    </div>
</template>

<script>
import { MessageBox } from "mint-ui";
export default {
  data() {
    return {
      SessionId: "",
      money30: "0",
			money90: "0",
			isWeixin:false,
      headerImg: require("../../public/imgs/sweet/img-sweet-header.png"),
      imgs: [
        require("../../public/imgs/sweet/img-sweet-1.png"),
        require("../../public/imgs/sweet/img-sweet-2.png"),
        require("../../public/imgs/sweet/img-sweet-3.png"),
        require("../../public/imgs/sweet/img-sweet-4.png")
      ],
      PopupRule: false
    };
  },
  created() {
    var UserInfo = APP.getInfo();
    UserInfo.then(res => {
      if (res.uId !== "") {
        this.SessionId = res.sessionid;
        this.init(res.sessionid);
      } else {
        var msg = MessageBox({
          title: "温馨提示",
          message: "该活动需要您登录之后，才能参加哦~",
          confirmButtonText: "去登录",
          cancelButtonText: "取消",
          showCancelButton: true
        });

        msg.then(function(action) {
          if (action == "confirm") {
            APP.Login();
          }
        });
      }
    });
	},
	mounted () {
		this.isWeixin = APP.isClient;
	},
  methods: {
    init(id) {
      var req = this.Axios.get(this.Interface.GetSweetInfo, {
        params: {
          sessionid: id
        }
      });
      req.then(res => {
				var data = res.data;
        if (data.success) {
          this.money30 = data.data.amount30 == null ? 0 : data.data.amount30;
          this.money90 = data.data.amount90 == null ? 0 : data.data.amount90;
        } else {
          this.Toast(data.data.message || data.data.error_msg);
        }
      });
    },
    showrule() {
      this.PopupRule = true;
    },
    closerule() {
      this.PopupRule = false;
    },
    GoProductList() {
      APP.JumpNavite("jumpToProductList");
    }
  }
};
</script>
<style lang="less">
.page-sweet {
  width: 100%;
  background: #e64c3d;
  header {
    position: relative;
    .h-box {
      position: absolute;
      left: 0;
      top: 0;
      right: 0;
      bottom: 0;
      width: 670px;
      height: 300px;
      margin: 0 auto;
      box-sizing: border-box;
      padding: 605px 0 0 0;
      display: -webkit-box;
      .h-item {
        -webkit-box-flex: 1;
        text-align: center;
        color: #e64c3d;
        font-size: 28px;
      }
    }
    .h-btn {
      position: fixed;
      right: 0;
      top: 31.5%;
      width: 58px;
      height: 143px;
      color: #fff;
      writing-mode: vertical-lr;
      writing-mode: tb-lr;
      border-radius: 5px 0 0 5px;
      background: #ffab29;
      text-align: center;
      box-sizing: border-box;
      padding: 0 15px;
      font-size: 26px;
      transform: translate(0, -50%);
      cursor: pointer;
    }
  }
  footer {
    position: fixed;
    left: 0;
    bottom: 0;

    width: 100%;
    height: 100px;
    line-height: 100px;
    background: #ffd34e;
    font-size: 36px;
    color: #e64c3d;
    text-align: center;
  }
}
.r-box {
  border-radius: 10px;
  box-sizing: border-box;
  padding: 50px 40px;
	width: 700px;
  .r-inner {
    height: 750px;
    background: #fff;
    border-radius: 10px;
    .r-title {
      font-size: 36px;
      text-align: center;
      font-weight: normal;
      margin-bottom: 38px;
    }
    .r-body {
      margin-bottom: 20px;
      p {
        font-size: 28px;
        color: #666;
        text-align: justify;
        line-height: 40px;
      }
    }
    .r-footer {
      font-size: 24px;
      color: #999;
      p {
        line-height: 30px;
      }
    }
  }
  .r-close {
    position: absolute;
    width: 68px;
    height: 68px;
    left: 50%;
    bottom: -120px;
    transform: translate(-50%, 0);
    border-radius: 50%;
    background: url("../../public/imgs/sweet/img-sweet-close.png") center
      no-repeat;
    background-size: 68px 68px;
  }
}
.mint-msgbox-wrapper {
  .mint-msgbox {
    width: 500px;
    border-radius: 10px;
    .mint-msgbox-content {
      padding: 0;
      .mint-msgbox-message {
        height: 80px;
        line-height: 80px;
        font-size: 20px;
      }
    }
    .mint-msgbox-btns {
      height: 60px;
    }
  }
}
</style>
